<template>
  <div>
    <v-header>
      <i class="el-icon-fa-save icon" slot="saveBut" v-loading="saveLoading" @click="savePage"></i>
    </v-header>
    <v-side-menu :menus='menus' :hide='menuHide' @paint="addMatiral"></v-side-menu>
    <div class="container" @mousedown="cleanSelected">
      <div class="landding-page-container">
        <landing-page :p-items="items" @select="selectItem" :style="pageInfoStyle"></landing-page>
        <div class="move-bar" v-dragger @mousedown="beginChangePageHeight">
          <span>拖动调节页面高度</span>
          <i class="el-icon-fa-arrows-v"></i>
        </div>
      </div>
    </div>
    <v-tools></v-tools>
    <v-right-menu :item="selectedItem"></v-right-menu>
  </div>
</template>
<script>
import draggerEventBus from '@/components/public/DraggableDirective'
import _ from 'lodash'
import axios from 'axios'
import { Matirial, Page } from '@/api/page/model'
import packStyle from '@/util/packStyle.js'

let tmpPageHeight = ''
console.log(new Page({}).pageInfo)
export default {
  created: function () {
    var that = this
    axios.get(`http://localhost:3100/page/${this.$route.params.pageId}`).then(function (res) {
      console.log(that.items)
      var matirials = _.reduce(res.data.matirials, function (a, item) {
        a.push(new Matirial(item))
        return a
      }, [])
      that.items = matirials
      that.selectedItem = that.pageInfo = res.data.pageInfo
    })
  },
  data () {
    return {
      menus: [
        { order: 1, name: '文字', type: 'label', icon: 'el-icon-fa-text-height' },
        { order: 2, name: '图片', type: 'image', icon: 'el-icon-picture' },
        { order: 3, name: '其他', type: 'other', icon: 'el-icon-fa-tags' }
      ],
      menuHide: false,
      saveLoading: false,
      selectedItem: {style: {}},
      items: [],
      pageInfo: new Page({}).pageInfo
    }
  },
  methods: {
    savePage () {
      var that = this
      this.saveLoading = true
      axios.post(`http://localhost:3100/page/${this.$route.params.pageId}`, this.$data).then(function (resp) {
        console.log(resp)
        that.$message({
          onClose () {
            that.saveLoading = false
          },
          message: '这是一条成功的提示消息',
          type: 'success'
        })
      })
    },
    selectItem: function (i) {
      this.selectedItem = i
      _.each(this.items, function (item) {
        item.editting = false
      })
      this.selectedItem.editting = true
    },
    cleanSelected () {
      _.each(this.items, function (item) {
        item.editting = false
      })
      this.selectedItem = this.pageInfo
    },
    addMatiral: function (i) {
      console.log(i)
      this.items.push(i)
    },
    doChangePageHeight: function (e) {
      let oldHeight = parseFloat(/\d+/.exec(tmpPageHeight)[0])
      this.pageInfo.style.height = ((oldHeight + e.oY) < 736 ? 736 : oldHeight + e.oY) + 'px'
    },
    beginChangePageHeight: function () {
      tmpPageHeight = this.pageInfo.style.height
      draggerEventBus.$on('dragger-offset', this.doChangePageHeight)
      draggerEventBus.$on('dragger-end', this.endChangePageHeight)
    },
    endChangePageHeight: function () {
      draggerEventBus.$off('dragger-offset', this.doChangePageHeight)
      draggerEventBus.$off('dragger-end', this.endChangePageHeight)
    }
  },
  computed: {
    pageInfoStyle () {
      return packStyle(this.pageInfo.style)
    }
  }
}
</script>
<style lang="scss">
@import '../config/variables.scss';
.container {
  position: absolute;
  left: $side-menu-width + $sub-container-width;
  right: $right-menu-width;
  top: 45px;
  bottom: 0;
  background: #E8E8E8;
  z-index: -1;
  overflow-y: scroll;
  padding: 30px 0 150px;
  .landding-page-container {
    width: 414px;
    position: relative;
    min-height: 736px;
    background: whitesmoke;
    margin: 0 auto;
    box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.2);
    .move-bar {
      height: 30px;
      line-height: 30px;
      border-top:1px solid gray;
      cursor: ns-resize;
      user-select: none;
      z-index: 999;
      font-size: 14px;
    }
  }
}
</style>
